<template>
	<view class="username">
		<!-- 1，更改用户信息 -->
		<view class="con">
			<view class="box" @click="gotoUsername">
				<view class="left">
					<view class="nickname">
						<text>账号与安全</text>
					</view>
				</view>
				<view class="right">
					<view class="goMore">
						<image :src="goMoreImg"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 2，消息通知 -->
		<view class="con">
			<view class="box" @click="gotoConceal">
				<view class="left">
					<view class="text">
						<text>隐私政策</text>
					</view>
				</view>
				<view class="right">
					<view class="goMore">
						<image :src="goMoreImg"></image>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="left">
					<view class="text">
						<text>消息通知</text>
					</view>
				</view>
				<view class="right">
					<view class="more-switch">
						<switch :checked="isChecked" color="#108EE9" style="transform: scale(0.8)"
							@change="changeSwitch" />
					</view>
				</view>
			</view>
		</view>
		<!-- 3，其他 -->
		<view class="con">
			<view class="box" v-for="(item,index) in usernameSetData" :key="index" @click="clickConItem(item)">
				<view class="left">
					<view class="text">
						<text>{{item.text}}</text>
					</view>
				</view>
				<view class="right">
					<view class="goMore">
						<image :src="goMoreImg"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 4，退出登录 -->
		<my-bottom :title="title" :isShowZw="false" @clickBtn="signOut"></my-bottom>
	</view>
</template>

<script>
	import {
		mapMutations,
	} from 'vuex'

	import myBottom from '@/components/common/my-bottom-btn/my-bottom-btn.vue'

	export default {
		components: {
			myBottom
		},
		data() {
			return {
				userId: uni.getStorageSync('userId'),
				title: '退出登录',
				//head: require('@/static/data/img/07.png'),
				nickname: '清风老大',
				isChecked: false,
				goMoreImg: require('@/static/img/common/goMore.svg'),
				usernameSetData: [{
						id: 1,
						text: '清空所有聊天记录'
					},
					{
						id: 2,
						text: '清除缓存'
					},
					{
						id: 3,
						text: '版本号'
					},
					{
						id: 4,
						text: '关于我们'
					}
				]
			}
		},
		methods: {
			...mapMutations('m_chat', ['emptyAll', 'cleanChatMsg']),

			changeSwitch(e) {
				//console.log(e)
				var isSwitch = e.detail.value

				this.isChecked = isSwitch
				if (isSwitch) {
					//发送消息
					var that = this
					if (!('myWebsocket' in uni) || uni.myWebsocket == undefined || uni.myWebsocket == '' || uni
						.myWebsocket ==
						null) {
						//连接上websocket
						uni.$connectSocketInit.connectSocket(uni.$basePort)
					}

					let msgData = {
						type: this.$chatType.QUIT_UNI_PUSH,
						msg: {
							senderId: this.userId
						}
					}

					uni.myWebsocket.socketTask.send({
						data: JSON.stringify(msgData),
						async success() {
							//关闭，消息提醒
							uni.removeStorageSync('isUniPush')
						},
						fail(e) {
							uni.$showMsg('发送失败，请重新发送');
							//this.connectSocketInit()
						}
					});
				} else {
					//开启消息提醒
					uni.setStorageSync('isUniPush', true)
				}
			},

			//1，账号安全
			gotoUsername() {
				uni.navigateTo({
					url: '/subpkg/main/my/set-up/account-number/account-number'
				})
			},
			//2，跳转隐私政策
			gotoConceal() {
				uni.navigateTo({
					url: '/subpkg/main/my/agree-on/private-xy/private-xy'
				})
			},
			//3，更多的功能
			clickConItem(item) {
				if (item.id == 1) {
					return this.removeChatStorage()
				} else if (item.id == 2) {
					return this.cleanStorage()
				} else if (item.id == 3) {

					// 获取本地应用资源版本号
					plus.runtime.getProperty(plus.runtime.appid, (info) => {

						// this.version = info.version;
						// this.versionCode = info.versionCode ;
						return uni.$showMsg('当前版本' + info.version)
					})

					return uni.$showMsg('当前版本1.0.0！')
				} else if (item.id == 4) {
					return uni.navigateTo({
						url: '/subpkg/main/my/set-up/about-my/about-my'
					})
				}
			},
			//3.1，清空聊天记录
			async removeChatStorage() {
				var that = this
				uni.$isShowModal('是否清空本地记录？清空后无法恢复！').then(resultState => {
					if (resultState) {
						that.cleanChatMsg()
					}
				})
			},
			//3.2，清除缓存
			async cleanStorage() {
				var that = this
				uni.$isShowModal('是否清空本地缓存？清空后无法恢复！').then(resultState => {
					if (resultState) {
						setTimeout(() => {
							return uni.$showMsg('已清空！')
						}, 100)
					}
				})
			},

			//退出登录
			async signOut() {
				var that = this
				uni.$isShowModal('是否退出账号？').then(resultState => {
					if (resultState) {
						uni.myWebsocket.socketTask.close()
						uni.myWebsocket = ''

						//删除vuex的缓存
						that.emptyAll()

						uni.reLaunch({
							url: "/pages/login/login/login",
							success: () => {
								//plus.navigator.closeSplashscreen();
							}
						})
					}
				})
			},

			//链接上websocket
			connectSocketInit() {
				//console.log(123)
				if (uni.myWebsocket == undefined || uni.myWebsocket == '' || uni.myWebsocket == null) {
					//连接上websocket
					uni.$connectSocketInit.connectSocket(uni.$basePort)
				}
			},
		},
		onLoad() {
			//uni.setStorageSync('isUniPush', true)
			//console.log(uni.getStorageSync('isUniPush'))
			this.isChecked = uni.getStorageSync('isUniPush')

			this.connectSocketInit()
		}
	}
</script>

<style scoped lang="scss">
	.username {
		width: 100%;
		// height: 100vh;
		background-color: rgba(248, 248, 248, 1);
	}

	.con {
		width: 100%;
		background-color: #fff;
		margin-bottom: 30rpx;

		.box {
			&:active {
				background-color: #eee;
			}

			width: 92%;
			padding: 0 4%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;


			.left {
				line-height: 100rpx;
				font-size: 28rpx;
				font-weight: 500;
			}

			.right {
				.goMore {
					image {
						width: 40rpx;
						height: 40rpx;
						margin-top: 30rpx;
					}
				}
			}
		}
	}
</style>